<template>
  <view class="comment">
    <!-- 评论列表 -->

    <uni-list-chat
      v-for="comment in commentList"
      :key="comment.id"
      :title="comment.nickname"
      :avatar="comment.avatar"
      :note="comment.content"
    >
      <view class="chat-custom-right">
        <text class="chat-custom-text">{{ comment.gmtCreate }}</text>
        <!-- 需要使用 uni-icons 请自行引入 -->
        <uni-rate :touchable="false" :value="5" size="12" />
      </view>
    </uni-list-chat>
    <!-- 加载更多 -->
    <view class="load_more" v-if="commentList.length">
      <uni-load-more :status="status" />
    </view>
    <view v-else> 暂无评论 </view>

    <!-- 提交评论 -->
    <view class="comment_bar">
      <input
        class="input_box"
        placeholder="请点击输入"
        cursor-spacing="10"
        v-model="content"
      />
      <uni-icons
        class="input_icon"
        type="paperplane-filled"
        size="20"
        @tap="sendComment"
      />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { getCourseCommentListApi, sendCommentApi } from "@/api/comment";
import type { CommentList } from "@/api/types";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";

// 发布评论
const content = ref("");

const sendComment = async () => {
  if (!content.value) return;
  await sendCommentApi(
    content.value,
    courseId.value,
    commentList.value[0].teacherId
  );
  page.value = 1;
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 0,
  });
  getCourseCommentList();
  content.value = "";
};

// 评论分页列表
const page = ref(1);
const limit = ref(10);
const totalPages = ref(0);
const courseId = ref("");
const commentList = ref<CommentList>([]);

onLoad(async (options: any) => {
  courseId.value = options.courseId;
  getCourseCommentList();
});

const getCourseCommentList = async () => {
  const res = await getCourseCommentListApi(
    page.value,
    limit.value,
    courseId.value
  );
  totalPages.value = res.pages;
  if (page.value === 1) {
    commentList.value = res.items;
  } else {
    commentList.value = [...commentList.value, ...res.items];
  }
};

// 上拉加载
const status = ref("more");

onReachBottom(async () => {
  if (page.value >= totalPages.value) return;
  status.value = "loading";
  page.value++;
  await getCourseCommentList();
  if (page.value >= totalPages.value) {
    status.value = "no-more";
  } else {
    status.value = "more";
  }
});
</script>

<style lang="scss" scoped>
.chat-custom-right {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.chat-custom-text {
  font-size: 13px;
  color: #999;
}
.comment {
  background: white;
  padding-bottom: 100rpx;
  .comment_bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
      180deg,
      hsla(0, 0%, 86.7%, 0) 0,
      hsla(0, 0%, 86.7%, 0.2) 0.42857rem,
      hsla(0, 0%, 86.7%, 0.2) 0.57143rem,
      #fff 0.64286rem,
      #fff
    );

    .input_box {
      width: 80%;
      height: 30px;
      line-height: 30px;
      background-color: #f2f3f7;
      border-radius: 20px;
      // text-indent: 10px;
      padding-left: 10px;
      font-size: 16px;
    }
    .input_icon {
      margin-left: 8px;
    }
  }
}
</style>
